
<template>
  <div class="relation-task">
    <el-table 
      :data="associatedSessionList"
      stripe
      border
      header-row-class-name="base-table-header-v3"
      row-class-name="base-table-row-v3"
    >
      <el-table-column :label="$t('event.detail.components.associatedSession.text1')" width="150" >
        <template slot-scope="scope">
          <el-button type="text" @click="goImDetail(scope.row.id)">{{scope.row.conversationNumber}}</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.customer.customerName')" prop="customerName" width="150"></el-table-column>
      <el-table-column :label="$t('common.base.contact')" prop="linkmanName" width="150"></el-table-column>
      <el-table-column :label="$t('common.base.phone')" prop="phoneNumber" width="150"></el-table-column>
      <el-table-column :label="$t('common.base.locationMap.address')" prop="customerAddress" width="150"></el-table-column>
      <el-table-column :label="$t('common.fields.weChatNickname.displayName')" prop="nickName" width="150"></el-table-column>
      <el-table-column :label="$t('common.base.sex')">
        <template slot-scope="scope">
          {{scope.row.gender }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('event.detail.components.associatedSession.text2')" width="150">
        <template slot-scope="scope">
          {{ fmt_datetime(scope.row.startTime)}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('event.detail.components.associatedSession.text3')" width="150">
        <template slot-scope="scope">
          {{ fmt_datetime(scope.row.endTime)}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.form.type.consultName')" prop="consultName" width="150"></el-table-column>
      <el-table-column :label="$t('event.detail.components.associatedSession.text4')" prop="solveStatus">
        <template slot-scope="scope">
          {{solveStatusMap[scope.row.solveStatus]}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('event.detail.components.associatedSession.text5')">
        <template slot-scope="scope">
          {{conversationStatusMap[scope.row.conversationStatus]}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('task.detail.components.serviceDegree')" prop="serviceSatisfied" width="150"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import moment from 'moment'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { openAccurateTab } from '@src/util/platform'
export default {
  name: 'associated-session',
  props:{
    associatedSessionList: {
      type: Array,
      default: ()=>[]
    },
    eventId:{
      type:String,
      default:''
    }
  },
  data() {
    return{
      conversationStatusMap:{
        0:this.$t('event.detail.components.associatedSession.text6'),
        1:this.$t('event.detail.components.associatedSession.text7'),
        2:this.$t('common.base.processing'),
        3:this.$t('event.detail.components.associatedSession.text8')
      },
      sexMap: {
        0:this.$t('common.base.woman'),
        1:this.$t('common.base.man'),
      },
      solveStatusMap:{
        'SOLVED':this.$t('common.base.resolved'),
        'UNSOLVED':this.$t('common.base.notResolved')
      }
    }
  },
  methods: {
    goImDetail(conversationId) {
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `im_view_${conversationId}`,
      //   title: '会话详情',
      //   close: true,
      //   url: `/im/imDetail?id=${conversationId}`,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageImView,
        key: conversationId,
        params: `id=${conversationId}`,
        fromId
      })
    },
    fmt_datetime(val){
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    }
  },
}
</script>

<style lang="scss" scoped>
.check-archive{
  color: $color-primary;
  text-align: center;
  margin-bottom: 0;
  cursor: pointer;
  flex-basis: 100%;
  margin-top: 12px;
}
.relation-task {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  ::v-deep .el-table {
    flex: 1;
    overflow: auto;
  }
}
</style>